<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类详情</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet"  type="text/css" href="css/type.css">
</head>
<body>
<div id="wrap">
    <div class="topBGdiv" v-show="noPlay">
        <img class="topBG" :src="categoryCoverUrl" alt="">
        <!--<img class="videoPlayBtn" @click="isPlayFun" src="./img/play@2x.png" alt="">-->
        <div class="titleDiv">
            <img src="./img/titleBg@2x.png" alt="">
            <div class="titleName">
                <span class="cnName">{{categoryNameCn}}</span>
                <!--<br>-->
                <span class="enName">{{categoryNameEn}}</span>
            </div>
        </div>
    </div>
    <div class="videoArea" v-show="isPlay">
        <video  class="videoTag" :src="categoryVideoUrl" controls="controls"  controlsList="nodownload">
        </video>
    </div>
    <ul>
        <li class="listData" @click="ToCategory(item.id)" v-for="item in userScenarioProgressList">
            <div class="listDataDiv">
                <p class="explain_title">{{item.tpoName}}</p>
                <p class="explain_en"> {{item.name_en}}</p>
                <p class="explain_cn">{{item.name_cn}}</p>
                <div class="explain_x">
                    <img src="./img/starH@2x.png" v-show="item.score>=1" alt="">
                    <img src="./img/starH@2x.png" v-show="item.score>=2" alt="">
                    <img src="./img/starH@2x.png" v-show="item.score>=3" alt="">
                    <img src="./img/starG@2x.png" v-show="item.score<1" alt="">
                    <img src="./img/starG@2x.png" v-show="item.score<2" alt="">
                    <img src="./img/starG@2x.png" v-show="item.score<3" alt="">
                </div>
            </div>
            <div class="stateQ" v-show="item.openid!==null"> </div>
            <div class="stateH" v-show="item.openid==null"> </div>
            <div class="stateline"v-show="item.$index==0"></div>
        </li>
        <!--<li @click="isPlayFun">看视频</li>-->
    </ul>

</div>

</body>
</html>
<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/basis.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" charset="utf-8"></script>
<script src="js/vue-router.js" charset="utf-8"></script>
<script src="js/jweixin-1.2.0.js" charset="utf-8"></script>
<script src="js/weixinShare.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var url = location.search;
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串；
            var strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = ( strs[i].split("=")[1] );
            }
            console.log(theRequest); //此时的theRequest就是我们需要的参数；
        }
        ;
//        var URL = 'http://192.168.15.42:8821';
        var vm = new Vue({
            el: '#wrap',
            data: {
                isPlay: false,
                noPlay: true,
                categoryNameEn: "",
                categoryNameCn: "",
                categoryCoverUrl: "",
                categoryVideoUrl: "",
                userScenarioProgressList: "",

            },
            methods: {
                HttpDataFun: function () {
                    this.$http.post(URL + '/tpo/exercise/categories/details/' + theRequest.id, {}).then(function (res) {
                        if (res.data.status == 200) {
                            console.log(res.data.data)
                            this.categoryNameEn = res.data.data.categoryNameEn;
                            this.categoryNameCn = res.data.data.categoryNameCn;
                            this.categoryCoverUrl = res.data.data.categoryCoverUrl;
                            this.categoryVideoUrl = res.data.data.categoryVideoUrl;
                            this.userScenarioProgressList = res.data.data.userScenarioProgressList;
                        }
                        if (res.data.status == 400) {
                            alert(res.data.message)
                        }
                        if (res.data.status == 500) {
                            alert(res.data.message)
                        }
                    }, function (res) {
                        console.log("error");
                        console.log(res.status);
                        console.log(res);
                    })
                },
                isPlayFun: function () {
                    this.isPlay = true;
                    this.noPlay = false;
                },
                ToCategory:function (data) {
                    window.location.href = 'category.html?id=' + data;
                }
            }

        })
        vm.HttpDataFun();
        //处理页面返回
//        $(function () {
//            pushHistory();
//            window.addEventListener("popstate", function (e) {  //回调函数中实现需要的功能
////             alert("我监听到了浏览器的返回按钮事件啦123");
////            window.history.go(-3);
//                location.href = "home.html";  //在这里指定其返回的地址
//            }, false);
//
//            function pushHistory() {
//                var state = {
//                    title: "首页",
//                    url: "home.html"
//                };
////        window.history.go(-3);
//                window.history.pushState(state, state.title, state.url);
//            }
//        })
    }
</script>